<template>
	<view>
    <cm-nav>
      <template v-slot:left>
        <view class="cm-flex cm-flex-a-center">
          <cm-button type="primary" :border="false"
            :cm-style="{ padding: '0', backgroundColor: 'rgba(0, 0, 0, 0)' }"
            @click="calendarClickHandler">
            <cm-icon size="24" type="iconfont icon-calendar"></cm-icon>
            <text>万年历</text>
          </cm-button>
        </view>
      </template>
      <template v-slot:center>
        {{ tabList[selectedIndex].text }}
      </template>
    </cm-nav>
    
    <!-- 页面区域，下边距与tabBar高度相同 -->
    <view>
      <view v-if="isPageLoaded(0)" v-show="isPageShow(0)">
        <bagua-create tab-height="50"></bagua-create>
      </view>
      <view v-if="isPageLoaded(1)" v-show="isPageShow(1)">
        <user-center tab-height="50"></user-center>
      </view>
    </view>
    
    <cm-tabbar height="50" :tab-list="tabList" @change="tabChangeHandler"></cm-tabbar>
	</view>
</template>

<script src="./index.js"></script>

<style lang="stylus">
@import './index.styl'
</style>
